.wrapper {
  display: inline-block;
  cursor: pointer;
  transition: opacity 0.2s;
}

.wrapper:hover {
  opacity: 0.7;
}

.bar {
  display: block;
  position: relative;
  width: 1.8em;
  height: 1.4em;
}

.span {
  position: absolute;
  width: 1.6em;
  height: 0.25em;
  background: var(--primary-color);
  border-radius: 100px;
  display: inline-block;
  transition: 0.3s ease;
  left: 0;
}

.top {
  top: 0;
}

.middle {
  top: 0.6em;
}

.bottom {
  bottom: 0;
}

/* Checked state */
.checkedTop {
  transform: rotate(45deg);
  transform-origin: top left;
  width: 1.7em;
  left: 0.18em;
}

.checkedBottom {
  transform: rotate(-45deg);
  transform-origin: top left;
  width: 1.7em;
  bottom: -0.03em;
}

.checkedMiddle {
  transform: translateX(-0.7em);
  opacity: 0;
}

